<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="../../../../../bos_fore/bos_fore/src/main/webapp/js/angular.min.js"></script>
		<script type="text/javascript" src="../../../../../bos_fore/bos_fore/src/main/webapp/js/bootstrap.js"></script>
		<script type="text/javascript" src="../../../../../bos_fore/bos_fore/src/main/webapp/js/jquery.js"></script>
		<link rel="stylesheet" href="../../../../../bos_fore/bos_fore/src/main/webapp/css/bootstrap/bootstrap.css" />
		<title>分页练习...</title>
	</head>

	<body ng-app="paginationApp" ng-controller="paginationCtrl">
		<table class="table-bordered" width="100%" border="1">
			<tr>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>商品数量</th>
			</tr>
			<tr ng-repeat="product in pageList">
				<!--使用  repeat  进行  数据信息遍历-->
				<td>{{$index + 1}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
		</table>
		<div>
			<!--实现分页的动态切换和加载-->
			<ul class="pagination  pull-right">
				<li>
					<a href ng-click="prev()">上一页</a>
				</li>
				<!--是对当前页的显示     并判断是否是选中的当前页   是 的话3 会给出提示  并特殊显示-->
				<li ng-repeat="product in pageList" ng-class="{active: isActivePage(product)}">
					<!--判断选中的页面  是否是当前页   如果是   给出特殊显示-->
					<!--对选中当前页面进行判断  是当前页  则会有特殊显示-->
					<a href ng-click="selectPage(product)">{{product}}</a>
				</li>
				<li>
					<a href ng-click="next()">下一页</a>
				</li>
			</ul>

		</div>

	</body>
	<script type="text/javascript">
		var paginationApp = angular.module("paginationApp", []);
		paginationApp.controller("paginationCtrl", ["$scope", "$http", 
		function($scope, $http) {

			//分页功能工具条     必备数据
			$scope.currentPage = 1; // 当前页  （请求数据）
			$scope.pageSize = 2; // 每页记录数（请求数据）
			$scope.totalCount = 0; // 总记录数（响应数据）
			$scope.totalPages = 0; // 总页数 （响应数据）[根据总记录数  和 总页数来计算]

			//要在分页工具条显示所有页码
			$scope.pageList = new Array();
			
			//加载上一页数据
			$scope.prev = function() {
				$scope.selectPage($scope.currentPage - 1);
			}
			//加载下一页数据
			$scope.next = function() {
				$scope.selectPage($scope.currentPage + 1);
			}
			//加载指定页数据            						//为神魔将page传进去？？？？
			$scope.selectPage = function(product) {
				//page  超出范围
				if($scope.totalCount != 0 && (product < 1 || product > $scope.totalPages)) {
					return;
				}

				$http({
					method: 'GET',
					url: '6_1' + product + '.json',
					params: {
						product: product, //页码
						pageSize: $scope.pageSize //每页记录数
					}
				}).success(function(data, status, headers, config) {
					//显示表格数据
					$scope.products = data.products;
					//根据总记录数   计算总页数
					$scope.totalCount = data.totalCount;
					$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
					///更新当前显示页码
					$scope.currentPage = product;

					// 显示分页工具条中页码
					var begin; // 显示第一个页码 
					var end; // 显示最后一个页码
					//理论上的begin 是当前页 - 5
					begin = $scope.currentPage - 5;
					if(begin < 1) {
						//第一页码不能小于一
						begin = 1;
					}
					// 显示10个页码   理论上end 是 begin+ 9
					end = begin + 9;
					if(end > $scope.totalPages) {
						//最后一个页码  不能大于总页数
						end = $scope.totalPages;
					}
					//修正begin 的值  ， 理论上 begin 是   end -9
					begin = end - 9;
					if(begin < 1) {
						//第一个页码不能小于一
						begin = 1;
					}
					//将页码加入PageList 集合
					for(var i = begin; i <= end; i++) {
						$scope.pageList.push(i);
					}
				}).error(function(data, status, headers, config) {
					//当响应以错误状态返回时调用
					alert("出错，请联系管理员!");
				});
				
					//判断是否为当前页
			$scope.isActivePage() = function(product) {
				return product === $scope.currentPage;
			}
			///初始化 选中第一页面
			$scope.selectPage(1);

			
		
			/*//进行http请求
			$http({
				method: 'GET',
				url: '6_1.json', //向 Action发起请求的路径 
				params: {
					//  发送请求参数
				}
			}).success(function(data, status, headers, config) {
				// 当响应以错误状态返回时 执行 该语句
				//发送成功之后   data是回调函数
				$scope.products = data.products; // products --- 是 回电函数的对象  可以通过他 来获取对饮数据
			}).error(function(data, status, headers, config) {
				// 当响应以错误状态返回时 执行 该语句
				alert("发送短息出错，请联系管理员！！！");
			});
*/
		}]);
	</script>

</html>